<template>
  <!-- sharing-area -->
  <div class="interval my-img-btn my-img-btn-flex">
    <block v-for="(item, index) in jinList" :key="index">
      <md-button class="my-img-btn"><img :src="item"/></md-button>
    </block>
  </div>
</template>

<script>
export default {
  props: {
    jin1: {
      type: String,
      default: require("@/assets/customer/jin1.jpg")
    },
    jin2: {
      type: String,
      default: require("@/assets/customer/jin2.jpg")
    },
    jin3: {
      type: String,
      default: require("@/assets/customer/jin3.jpg")
    },
    jin4: {
      type: String,
      default: require("@/assets/customer/jin4.jpg")
    },
    jin5: {
      type: String,
      default: require("@/assets/customer/jin5.jpg")
    },
    jin6: {
      type: String,
      default: require("@/assets/customer/jin6.jpg")
    },
    jin7: {
      type: String,
      default: require("@/assets/customer/jin7.jpg")
    },
    jin8: {
      type: String,
      default: require("@/assets/customer/jin8.jpg")
    },
    jin9: {
      type: String,
      default: require("@/assets/customer/jin9.jpg")
    },
    jin10: {
      type: String,
      default: require("@/assets/customer/jin10.jpg")
    }
  },
  data() {
    return {
      jinList: [
        this.jin1,
        this.jin2,
        this.jin3,
        this.jin4,
        this.jin5,
        this.jin6,
        this.jin7,
        this.jin8,
        this.jin9,
        this.jin10
      ]
    };
  },
  mounted() {},
  methods: {}
};
</script>

<style lang="scss">
.my-img-btn-flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
.my-img-btn {
  margin: 1rem 1rem !important;
  .md-button:not(.md-just-icon):not(.md-btn-fab):not(.md-icon-button):not(.md-toolbar-toggle)
    .md-ripple {
    padding: 0 !important;
  }
}
</style>
